<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="library/layui/css/layui.css">
    <link rel="stylesheet" href="css/index.css">
    <title>数据采集</title>
</head>

<body>
    <div class="layui-row">
        <div class="layui-col-md12 layui-col-lg12 layui-col-xl12">
            <div class="header">
                <div class="project"><span id="projectBtn" class="project">数据采集</span></div>
                <div class="time"><span id="time"></span></div>
            </div>
        </div>
    </div>
    <div class="layui-row toolbar">
        <div class="layui-col-md12 layui-col-lg12 layui-col-xl12">
            <div class="layui-btn-container toolbox">
                <button id="start" type="button" class="layui-btn layui-btn-radius">
                    <i class="layui-icon layui-icon-chart"></i><span id="startBtn">开始采集</span>
                </button>
                <button id="selectProject" type="button" class="layui-btn layui-btn-radius">
                    <i class="layui-icon layui-icon-app"></i>选择工程
                </button>
                <button id="report" type="button" class="layui-btn layui-btn-radius layui-bg-red disable">
                    <i class="layui-icon layui-icon-print"></i><span>试压报告</span>
                </button>
                <button id="addProject" type="button" class="layui-btn layui-btn-radius">
                    <i class="layui-icon layui-icon-app"></i><span>添加工程</span>
                </button>
                <button id="template" type="button" class="layui-btn layui-btn-radius">
                    <i class="layui-icon layui-icon-template-1"></i><span>添加模板</span>
                </button>
                <button id="set" type="button" class="layui-btn layui-btn-radius">
                    <i class="layui-icon layui-icon-set-fill"></i><span>设置面板</span>
                </button>

            </div>
        </div>
    </div>
    <div class="layui-row">
        <div class="layui-row layui-form-pane">
            <div class="layui-col-md6 layui-col-lg6 layui-col-xl6">
                <div class="panel">
                    <div class="layui-row">
                        <div class="layui-col-md12 layui-col-lg12 layui-col-xl12">
                            <div id="pressureRange" class="title"><span>压力信息</span></div>
                            <hr>
                        </div>
                    </div>
                    <div class="layui-row">
                        <div class="layui-col-md6 layui-col-lg6 layui-col-xl6">
                            <div id="mainPressure" style="width: 100%;height:260px;" style="background-color: #fff;">
                            </div>
                        </div>
                        <div class="layui-col-md6 layui-col-lg6 layui-col-xl6">
                            <div id="remotePressure" style="width: 100%;height:260px;" style="background-color: #fff;">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md6 layui-col-lg6 layui-col-xl6">
                <div class="panel">
                    <div class="layui-row">
                        <div class="layui-col-md6 layui-col-lg6 layui-col-xl6">
                            <div class="title"><span>试压信息</span></div>
                            <hr>
                        </div>
                        <div class="layui-col-md6 layui-col-lg6 layui-col-xl6">
                            <div class="title"><span>试压阶段</span></div>
                            <hr>
                        </div>
                    </div>
                    <div class="layui-row">
                        <div class="layui-col-md6 layui-col-lg6 layui-col-xl6">
                            <div class="layui-form">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">介质温度（℃）</label>
                                    <div class="layui-input-block">
                                        <div id="mediumTemplatureValue" class="normal"><span>--</span></div>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">环境温度（℃）</label>
                                    <div class="layui-input-block">
                                        <div id="enviromentTemplature" class="normal"><span>--</span></div>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">近端压力（MPa）</label>
                                    <div class="layui-input-block">
                                        <div id="mainPressureValue" class="normal"><span>--</span></div>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">远端压力（MPa）</label>
                                    <div class="layui-input-block">
                                        <div id="remotePressureValue" class="normal"><span>--</span></div>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">机箱温度（℃）</label>
                                    <div class="layui-input-block">
                                        <div id="boxTemplatureValue" class="normal"><span>--</span></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md6 layui-col-lg6 layui-col-xl6">
                            <div class="layui-form">
                                <div id="firstStageRow" class="layui-form-item">
                                    <label class="layui-form-label">试压一段</label>
                                    <div class="layui-input-block">
                                        <div id="firstStage" class="normal"><span>试压一段</span></div>
                                    </div>
                                </div>
                                <div id="secondStageRow" class="layui-form-item">
                                    <label class="layui-form-label">试压二段</label>
                                    <div class="layui-input-block">
                                        <div id="secondStage" class="normal"><span>试压二段</span></div>
                                    </div>
                                </div>
                                <div id="thirdStageRow" class="layui-form-item">
                                    <label class="layui-form-label">试压三段</label>
                                    <div class="layui-input-block">
                                        <div id="thirdStage" class="normal"><span>试压三段</span></div>
                                    </div>
                                </div>
                                <div id="intensityStageRow" class="layui-form-item">
                                    <label class="layui-form-label">强度阶段</label>
                                    <div class="layui-input-block">
                                        <div id="intensityStage" class="normal"><span>强度阶段</span></div>
                                    </div>
                                </div>
                                <div id="rigorStageRow" class="layui-form-item">
                                    <label class="layui-form-label">严密阶段</label>
                                    <div class="layui-input-block">
                                        <div id="rigorStage" class="normal"><span>严密阶段</span></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-row">
        <div class="layui-col-md6 layui-col-lg6 layui-col-xl6">
            <div class="chart" id="templature" style="width: 95%;height:450px;"></div>
        </div>
        <div class="layui-col-md6 layui-col-lg6 layui-col-xl6">
            <div class="chart" id="pressure" style="width: 95%;height:450px;"></div>
        </div>
    </div>
    <script src="library/jquery/jquery-3.7.1.min.js"></script>
    <script src="library/layui/layui.js"></script>
    <script src="library/moment/moment.js"></script>
    <script src="library/echart/echarts.min.js"></script>
    <script src="index.js"></script>
    <script>
        var mainPressure = 0;
        var remotePressure = 0;
        //压力图表
        var mainPressureChart;
        var remotePressureChart;

        //折现图标
        var templatureChart;
        var pressureChart;

        //温度
        var mediumTemplature = 0;
        var enviromentTemplature = 0;
        var mainMachineTemplature = 0;
        var remoteMachineTemplature = 0;

        setupPressureChart();
        setupLineChart();

        $("#selectProject").on('click', function () {
            if (!checkDataBaseState()) {
                return;
            }
            if (checkStartState()) {
                return;
            }
            window.formium.postMessage("ShowForm", "ProjectSelect");
        })

        $("#addProject").on('click', function () {
            if (!checkDataBaseState()) {
                return;
            }
            if (checkStartState()) {
                return;
            }
            window.formium.postMessage("ShowForm", "AddProject");
        })
        $("#template").on('click', function () {
            if (!checkDataBaseState()) {
                return;
            }
            if (checkStartState()) {
                return;
            }
            window.formium.postMessage("ShowForm", "AddTemplate");
        })
        $("#set").on('click', function () {
            if (!checkDataBaseState()) {
                return;
            }
            window.formium.postMessage("ShowForm", "Operation");
        })

        $("#report").on('click', function () {
            if (!checkDataBaseState()) {
                return;
            }
            var index = layer.confirm('您确定要停止采集，生产试压报告吗？', { icon: 3 }, function () {
                layer.close(index);
                loading("正在生成报告...");
                saveImage();
            });

        })
        var startCollectState = false;
        $("#start").on('click', function () {
            // if (!checkDataBaseState()) {
            //     return;
            // }
            if (startCollectState == true) {
                var index = layer.confirm('您确定要停止采集吗？', { icon: 3 }, function () {
                    window.formium.postMessage("Collect", "stop");
                    stopCollect();
                    layer.close(index);
                });
            }
            else {
                var index = layer.confirm('点击确定开始采集', { icon: 3 }, function () {
                    window.formium.postMessage("Collect", "start");
                    layer.close(index);
                });
            }
        })

        //开始采集
        function startCollect() {
            $("#startBtn").text("停止采集");
            startCollectState = true;
            freshChart();
        }

        //停止采集
        function stopCollect() {
            $("#startBtn").text("开始采集");
            startCollectState = false;
            clearInterval(chartInterval);
        }

        //更新近端压力
        function updateMainPressureChart(value, alarm) {
            mainPressure = value;
            mainPressureChart.setOption({
                series: [
                    {
                        data: [
                            {
                                value: value,
                                name: '近端压力'
                            }
                        ]
                    },
                ]
            });
            $("#mainPressureValue").text(value);
            if (alarm == 1) {
                $("#mainPressureValue").removeClass("normal");
                $("#mainPressureValue").addClass("warn");
            }
            else {
                $("#mainPressureValue").removeClass("warn");
                $("#mainPressureValue").addClass("normal");
            }
        }

        //更新远端压力
        function updateRemotePressureChart(value, alarm) {
            remotePressure = value;
            var option = {
                series: [
                    {
                        data: [
                            {
                                value: value,
                                name: '远端压力'
                            }
                        ]
                    },
                ]
            };
            remotePressureChart.setOption(option);
            $("#remotePressureValue").text(value);
            if (alarm == 1) {
                $("#remotePressureValue").removeClass("normal");
                $("#remotePressureValue").addClass("warn");
            }
            else {
                $("#remotePressureValue").removeClass("warn");
                $("#remotePressureValue").addClass("normal");
            }
        }

        //更新近端介质温度
        function updateMediumTemplature(value, alarm) {
            mediumTemplature = value;
            $("#mediumTemplatureValue").text(mediumTemplature);
            var dom = $("#mediumTemplatureValue");
            if (alarm == 1) {
                dom.removeClass("normal");
                dom.addClass("warn");
            }
            else {
                dom.removeClass("warn");
                dom.addClass("normal");
            }
        }

        //更新近端环境温度
        function updateEnviromentTemplature(value, alarm) {
            enviromentTemplature = value;
            $("#enviromentTemplature").text(enviromentTemplature);
            var dom = $("#enviromentTemplature");
            if (alarm == 1) {
                dom.removeClass("normal");
                dom.addClass("warn");
            }
            else {
                dom.removeClass("warn");
                dom.addClass("normal");
            }
        }

        //更新主机箱温度
        function updateMainBoxTemplature(value) {
            mainMachineTemplature = value;
        }

        //更新远端机箱温度
        function updateRemoteBoxTemplature(value) {
            remoteMachineTemplature = value;
        }

        //更新压力表盘量程
        function updatePressureCharRange(value) {
            var option = {
                series: [
                    {
                        max: value
                    },
                ]
            }
            mainPressureChart.setOption(option);
            remotePressureChart.setOption(option);
        }

        //配置压力表盘
        function setupPressureChart() {
            var mainOption = pressureChartOptions("main");
            var mainPressureChartDom = document.getElementById('mainPressure');
            mainPressureChart = echarts.init(mainPressureChartDom);
            mainPressureChart.setOption(mainOption);

            var remoteOption = pressureChartOptions("remote");
            var remotePressureChartDom = document.getElementById('remotePressure');
            remotePressureChart = echarts.init(remotePressureChartDom);
            remotePressureChart.setOption(remoteOption);
        }


        var mediumTemplatureData = [];
        var enviromentTemplatureData = [];

        var mainPressureData = [];
        var remotePressureData = [];

        var chartInterval;
        var dataZoom = false;


        ///刷新曲线
        function freshChart() {
            chartInterval = setInterval(() => {
                var time = moment().format("YYYY-MM-DD HH:mm:ss");
                var mediumTemplatureItem = [time, mediumTemplature];
                mediumTemplatureData.push(mediumTemplatureItem);
                var enviromentTemplatureItem = [time, enviromentTemplature];
                enviromentTemplatureData.push(enviromentTemplatureItem);
                var mainPressureItem = [time, mainPressure];
                mainPressureData.push(mainPressureItem);
                var remotePressureItem = [time, remotePressure];
                remotePressureData.push(remotePressureItem);
                var templatureChartOption = {
                    series: [
                        {
                            name: '近端介质温度',
                            data: mediumTemplatureData
                        },
                        {
                            name: '环境温度',
                            data: enviromentTemplatureData
                        }
                    ]
                }

                var pressureChartOption = {
                    series: [
                        {
                            name: '近端压力',
                            data: mainPressureData
                        },
                        {
                            name: '远端压力',
                            data: remotePressureData
                        }
                    ]
                }
                if (mediumTemplatureData.length > 10 && !dataZoom) {
                    updateDataZoom(60, 100)
                    dataZoom = true;
                }
                templatureChart.setOption(templatureChartOption);
                pressureChart.setOption(pressureChartOption);
                $("#boxTemplatureValue").text("近机箱：" + mainMachineTemplature + " 远机箱：" + remoteMachineTemplature);
            }, 1000);
        }

        function updateDataZoom(start, end) {
            var dataZoomOption = [{
                type: 'slider',
                realtime: true,
                start: start,
                end: end
            }];
            var option = {
                dataZoom: dataZoomOption
            }

            templatureChart.setOption(option);
            pressureChart.setOption(option);
        }

        function saveImage() {
            updateDataZoom(0, 100)
            setTimeout(() => {
                let content = pressureChart.getDataURL(
                    {
                        type: 'png',
                        backgroundColor: '#fff'
                    }
                );
                endLoading();
                window.formium.postMessage("SaveImage", content);
                setTimeout(() => {
                    window.formium.postMessage("ShowForm", "Report");
                }, 300);
            }, 200);
        }

        
        //折线图
        function setupLineChart() {
            var templatureLineChartOption = lineChartOption();
            templatureLineChartOption.title = { text: "温度曲线" }
            templatureLineChartOption.legend = {
                data: ['近端介质温度', '环境温度']
            }
            templatureLineChartOption.series = [
                {
                    name: '近端介质温度',
                    type: 'line',
                    smooth: true,
                    color: "#ff5722"
                },
                {
                    name: '环境温度',
                    type: 'line',
                    smooth: true,
                    color: "#ffb800"
                }
            ]

            templatureChart = echarts.init(document.getElementById('templature'));
            templatureChart.setOption(templatureLineChartOption);

            var pressureLineChartOption = lineChartOption();
            pressureLineChartOption.title = { text: "压力曲线" }
            pressureLineChartOption.legend = {
                data: ['近端压力', '远端压力']
            }
            pressureLineChartOption.series = [
                {
                    name: '近端压力',
                    type: 'line',
                    smooth: true
                },
                {
                    name: '远端压力',
                    type: 'line',
                    smooth: true
                }
            ]
            pressureChart = echarts.init(document.getElementById('pressure'));
            pressureChart.setOption(pressureLineChartOption);
        }

        function hiddenReportButton() {
            $("#report").addClass('disable');
        }

        function showReportButton(params) {
            $("#report").removeClass('disable');
        }

    </script>
</body>

</html>